<template>
	<view>
		
		<u--input v-model="keyword"></u--input>
		<u-button type="primary" @click="search">搜索</u-button>
		<u-button type="primary" @click="searchAddr">地址搜索</u-button>
		<map class="map" :latitude="latitude" :longitude="longitude" :markers="marks"></map>
	</view>
</template>

<script>
	import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
	var qqmapsdk;
	export default {
		data() {
			return {
				longitude:116.39747,
				latitude:39.908823,
				keyword:'',
				marks:[]
			}
		},
		methods: {
			search(){
				console.log('keywork',this.keyword);
				qqmapsdk.search({
					keyword:this.keyword,
					success:res=>{
						let marks=[]
						for(let i=0;i<res.data.length;i++){
							console.log('res');
							const item=res.data[i]
							marks.push({
								id:~~item.id,
								latitude:item.location.lat,
								longitude:item.location.lng,
								iconPath:'../../static/app/home_selected.png',
								width:35,
								height:35
							})
							this.marks=marks
						}
					},
					fail:err=>{
						console.log('err',err);
					}
				})
			}
			,
			searchAddr(){
				qqmapsdk.geocoder({
					address:this.keyword,
					success:res=>{
						console.log('res',res);
						//将位置移动到目标坐标上
						this.longitude=res.result.location.lng;//经度
						this.latitude=res.result.location.lat;//纬度
						
						this.marks.push({
							id:1,
							latitude:res.result.location.lat,
							longitude:res.result.location.lng,
							iconPath:'../../static/app/home_selected.png',
							width:35,
							height:35
						})
					}
				})
			}
		},
		onLoad() {
			//获取当前位置的定位
			uni.getLocation({
				type:'wgs84',
				success: (res) => {
					this.longitude=res.longitude
					this.latitude=res.latitude
				}
			})
			//实例化qqmapsdk
			qqmapsdk=new QQMapWX({
				key:'HUPBZ-UVBWU-XSEV6-GUS67-XXQZF-TIBZL'
			})
		}
	}
</script>

<style lang="scss">
	.map{
		width: 100vw;
		height: 100vh;
	}
</style>
